// 导入react-router-dom中的BrowserRouter、Routes和Route组件
import { BrowserRouter, Routes, Route } from "react-router-dom";
// 导入arco-design的样式
import "@arco-design/web-react/dist/css/arco.css";

// 导入登录页面组件
import LoginPage from "./pages/LoginPage";
// 导入注册页面组件
import RegisterPage from "./pages/RegisterPage";
// 导入404页面组件
import EmptyPage from "./pages/404";
// 导入PPT列表页面组件
import PPTList from "./pages/PPT/list";
// 导入PPT详情页面组件
import PPTDetail from "./pages/PPT/detail";
import PPTPreview from "./pages/PPT/preview";

function App() {
  return (
    <>
      <style>{`
      ::-webkit-scrollbar {
        width: 4px; /* 设置滚动条宽度 */
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 5px; /* 设置滑块的圆角 */
        background: rgba(0, 0, 0, 0.2); /* 设置滑块的颜色 */
      }
      ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1); /* 设置轨道的背景颜色 */
      }

      html,
      body,
      #root {
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      div {
        box-sizing: border-box;
      }  
    `}</style>
      {/* // 使用BrowserRouter组件包裹整个路由 */}
      <BrowserRouter>
        {/* // 使用Routes组件定义路由 */}
        <Routes>
          {/* // 定义一个通配符路由，当路径不匹配时，显示EmptyPage组件 */}
          <Route path="*" element={<EmptyPage />} />
          {/* // 定义根路径路由，当路径为"/"时，显示LoginPage组件 */}
          <Route path="/" element={<LoginPage />} />
          {/* // 定义登录路径路由，当路径为"/login"时，显示LoginPage组件 */}
          <Route path="/login" element={<LoginPage />} />
          {/* // 定义注册路径路由，当路径为"/register"时，显示RegisterPage组件 */}
          <Route path="/register" element={<RegisterPage />} />
          {/* // 定义PPT列表路径路由，当路径为"/pptList"时，显示PPTList组件 */}
          <Route path="/pptList" element={<PPTList />} />
          {/* // 定义PPT详情路径路由，当路径为"/pptDetail"时，显示PPTDetail组件 */}
          <Route path="/pptDetail" element={<PPTDetail />} />
          <Route path="/pptPreview" element={<PPTPreview />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
